<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta http-equiv="Content-Language" content="en">
	<meta name="viewport" content="width=device-width">
    <link rel="shortcut icon" href="https://jimmysong.io/favicon.png" type="image/x-icon">
    <link rel="icon" href="https://jimmysong.io/favicon.png" type="image/x-icon">
    <meta property="og:image" content="https://jimmysong.io/favicon.png">
	<title>Awesome Cloud Native</title>
	<meta name="description" content="A curated list of open-source cloud native tools, software and tutorials.">
	<meta name="keywords" content="cloud native, open source, tutorials, software">
	<link rel="stylesheet" type="text/css" href="./assets/fonts/firasans.css">
	<link rel="stylesheet" type="text/css" href="./assets/theme.css">
	<link rel="stylesheet" type="text/css" href="./assets/normalize.css">
	<link rel="stylesheet" type="text/css" href="./assets/awesome-go.css">
	<script defer src="https://cloud.umami.is/script.js" data-website-id="4be5e400-07e6-44aa-8e23-ac95dc6925aa"></script>
</head>
<body>
	<button id="theme-toggle" type="button" aria-label="Toggle dark mode" aria-pressed="false">🌙 Dark mode</button>
	<button id="back-to-top" type="button" aria-label="Back to top">↑ Top</button>
	<div id="content">
		{{.Body}}
	</div>

	<script src="./assets/jquery-custom.min.js"></script>
	<script src="./assets/marked.js"></script>
	<script>
	(function () {
		var storageKey = 'acn-theme';
		var body = document.body;
		var toggle = document.getElementById('theme-toggle');
		if (!toggle) {
			return;
		}

		function applyTheme(theme) {
			var isDark = theme === 'dark';
			body.classList.toggle('dark-mode', isDark);
			toggle.textContent = isDark ? '☀️ Light mode' : '🌙 Dark mode';
			toggle.setAttribute('aria-pressed', isDark ? 'true' : 'false');
		}

		var mediaQuery = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null;
		var stored = null;
		try {
			stored = localStorage.getItem(storageKey);
		} catch (err) {
			stored = null;
		}
		var prefersDark = mediaQuery ? mediaQuery.matches : false;
		var initial = stored || (prefersDark ? 'dark' : 'light');
		applyTheme(initial);

		if (mediaQuery) {
			var handleChange = function (event) {
				try {
					if (localStorage.getItem(storageKey)) {
						return;
					}
				} catch (err) {
					// ignore storage errors
				}
				applyTheme(event.matches ? 'dark' : 'light');
			};
			if (typeof mediaQuery.addEventListener === 'function') {
				mediaQuery.addEventListener('change', handleChange);
			} else if (typeof mediaQuery.addListener === 'function') {
				mediaQuery.addListener(handleChange);
			}
		}

		toggle.addEventListener('click', function () {
			var nextTheme = body.classList.contains('dark-mode') ? 'light' : 'dark';
			applyTheme(nextTheme);
			try {
				localStorage.setItem(storageKey, nextTheme);
			} catch (err) {
				// ignore storage errors
			}
		});
	})();
	</script>
	<script>
	(function () {
		var trigger = document.getElementById('back-to-top');
		if (!trigger) {
			return;
		}

		var lastKnownScroll = 0;
		var ticking = false;

		function toggleVisibility() {
			var shouldShow = lastKnownScroll > 320;
			trigger.classList.toggle('show', shouldShow);
		}

		window.addEventListener('scroll', function () {
			lastKnownScroll = window.scrollY;
			if (!ticking) {
				window.requestAnimationFrame(function () {
					toggleVisibility();
					ticking = false;
				});
				ticking = true;
			}
		});

		trigger.addEventListener('click', function () {
			window.scrollTo({ top: 0, behavior: 'smooth' });
		});
	})();
	</script>
</body>
</html>
